<template>
  <cube-form
    :model="model"
    :schema="schema"
    :immediate-validate="false"
    :options="options"
    @validate="validateHandler"
    @submit="submitHandler"></cube-form>
</template>
<script>
  import {addCustomer} from '@/api/index'
  export default {
    data () {
      return {
        model: {
          name: '',
          sex: '1',
          tel: '',
          wxId: '',
          wxNickname: '',
          comeFrom: '',
          tripType: []
        },
        options: {
          scrollToInvalidField: true,
          layout: 'standard' // classic fresh
        },
        schema: {
          groups: [
            {
              legend: '客户接入',
              fields: [
                {
                  type: 'input',
                  modelKey: 'name',
                  label: '姓名',
                  props: {
                    placeholder: '请输入',
                    autofocus: true
                  },
                  rules: {
                    required: true
                  },
                  trigger: 'blur'
                },
                {
                  type: 'radio-group',
                  modelKey: 'sex',
                  label: '性别',
                  props: {
                    options: [{label: '男', value: '1'}, {label: '女', value: '0'}]
                  },
                  rules: {
                    required: true
                  }
                },
                {
                  type: 'input',
                  modelKey: 'tel',
                  label: '电话',
                  props: {
                    placeholder: '请输入'
                  }
                },
                {
                  type: 'input',
                  modelKey: 'wxId',
                  label: '微信号',
                  props: {
                    placeholder: '请输入'
                  }
                },
                {
                  type: 'input',
                  modelKey: 'wxNickname',
                  label: '微信昵称',
                  props: {
                    placeholder: '请输入'
                  }
                },
                {
                  type: 'select',
                  modelKey: 'comeFrom',
                  label: '客户来源',
                  props: {
                    options: ['官网', '马蜂窝', '携程', '老带新', '同业介绍']
                  },
                  rules: {
                    required: true
                  }
                },
                {
                  type: 'checkbox-group',
                  modelKey: 'tripType',
                  label: '行程类型',
                  props: {
                    options: [
                      {label: '婚礼', value: 1},
                      {label: '婚拍', value: 2},
                      {label: '度蜜月', value: 3},
                      {label: '亲子', value: 4},
                      {label: '旅行', value: 5}
                    ]
                  },
                  rules: {
                    required: true
                  }
                }
              ]
            },
            {
              fields: [
                {
                  type: 'submit',
                  label: '保存'
                }
              ]
            }
          ]
        }
      }
    },
    methods: {
      submitHandler (e) {
        e.preventDefault()
        if (!this.model.tel && !this.model.wxId) {
          const toast = this.$createToast({
            type: 'warn',
            txt: '电话和微信号至少填写一个!'
          })
          toast.show()
          return
        }
        // 深拷贝对象
        let obj = {...this.model}
        obj.sex = Number(obj.sex)
        obj.tripType = obj.tripType.join(',')
        addCustomer(obj)
      },
      validateHandler (result) {
        this.validity = result.validity
        this.valid = result.valid
        console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)
      }
    }
  }
</script>
